<%= render 'shared/turbo_modal', title: params[:selfsign] ? 'Add Recipients' : 'Add New Recipients' do %>
  <% options = [['via Email', 'email'], ['via Phone', 'phone'], ['Detailed', 'detailed']] %>
  <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="relative text-center mt-4 block">
    <div class="join">
      <% options.each_with_index do |(label, value), index| %>
        <span>
          <%= radio_button_tag 'option', value, value == 'email', class: 'peer hidden', data: { action: 'change:toggle-visible#trigger' } %>
          <label for="option_<%= value %>" class="<%= '!rounded-s-full' if index.zero? %> btn btn-focus btn-sm join-item w-28 peer-checked:btn-active normal-case">
            <%= label %>
          </label>
        </span>
      <% end %>
    </div>
  </toggle-visible>
  <div class="mt-4">
    <div id="email">
      <%= render 'email_form', template: @template %>
    </div>
    <div id="phone" class="hidden">
      <%= render 'phone_form', template: @template %>
    </div>
    <div id="detailed" class="hidden">
      <%= render 'detailed_form', template: @template %>
    </div>
  </div>
  <%= content_for(:modal_extra) %>
<% end %>
